import { Link, Outlet, useLocation, useModel } from "@umijs/max";
import { ProBreadcrumb, ProLayout } from "@ant-design/pro-components";
import logo from '@/assets/imgs/logo.png'
import { PoweroffOutlined } from "@ant-design/icons";
import {history} from '@umijs/max';
import { useEffect } from 'react';
import menus, { Menu } from '@/menus';

export default function Workbench(){
  const {loading, data, runAsync} = useModel('user');
  const {pathname} = useLocation()

  useEffect(()=>{
    runAsync();
  },[])

  return <ProLayout
    loading={loading}
    logo={logo}
    title="毁HIFI管理后台"
    layout="mix"
    headerContentRender={() => <ProBreadcrumb />}
    breadcrumbRender={(routers = []) => {
      return routers;
    }}
    fixedHeader
    actionsRender={(props) => {
      return [
        // <span className="user">{data?.name}</span>,
        <PoweroffOutlined key="logout" onClick={()=>{
          history.push('/login');
        }} />,
      ];
    }}
    location={{
      pathname,
    }}
    menuDataRender={()=>{
      if(!data){
        return [];
      }
      const filterMenu = (menus: Menu[]): Menu[]=>{
        return menus
          .filter(item=>!item.resourceKey || data.resources.includes(item.resourceKey))
          .map(item=>{
            if(item.children){
              return {
                ...item,
                children: filterMenu(item.children),
              };
            }
            return item;
          })
      }
      return filterMenu(menus);
    }}
    menuItemRender={(data,dom) => {
      return (
        <Link
          to={data.path!}
        >
          {data.name}
        </Link>
      );
    }}
  >
    {data && <Outlet />}
  </ProLayout>
}
